<template>
  <div class="edit">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>{{title}}</span>
        <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="140px">
        <el-form-item label="商品标题" prop="goodsName">
          <el-input v-model="form.goodsName" placeholder="请输入商品标题" />
        </el-form-item>
        <el-form-item label="商品详情封面图" prop="goodsCover">
          <div class="upload-list">
            <Upload :max="5" :file-list="form.fileList" @change="(val) => {form.fileList = val}" />
          </div>
        </el-form-item>
        <el-form-item label="商品规格" prop="goodsStandard">
          <Choose :list="form.goodsStandard" @change="change" />
        </el-form-item>
        <el-form-item label="常规产品" prop="routineStatus">
          <el-switch
            v-model="form.routineStatus" :active-value="true" :inactive-value="false">
          </el-switch>
        </el-form-item>
        <el-form-item label="购买协议" prop="goodsAgreement">
          <Editor v-model="form.goodsAgreement" />
        </el-form-item>
        <el-form-item label="商品详情" prop="goodsContent">
          <Editor v-model="form.goodsContent" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button @click="cancel">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import Editor from "@/components/Editor";
import Upload from "@/components/Upload";
import Choose from "./choose";
import { getGoods, addGoods, updateGoods } from "@/api/system/goods";

export default {
  name: "GoodsEdit",
  components: {
    Editor,
    Upload,
    Choose
  },
  data() {
    return {
      title: "新增产品",
      // 表单参数
      form: {
        goodsName: "",
        fileList: [],
        goodsCover: [],
        goodsStandard: [{ length: "", type: 1, price: "", desc: "" }],
        goodsAgreement: "",
        goodsContent: "",
        routineStatus:true
      },
      // 表单校验
      rules: {
        goodsName: [
          { required: true, message: "请输入商品标题", trigger: "blur" }
        ],
        goodsAgreement: [
          { required: true, message: "请输入购买协议", trigger: "blur" }
        ],
        goodsContent: [
          { required: true, message: "请输入商品详情", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    this.getEditInfo();
  },
  methods: {
    change(value) {
      this.form.goodsStandard = value;
    },
    getEditInfo() {
      const id = this.$route.query.id;
      if (id) {
        getGoods(id).then(response => {
          const fileList = [];
          response.data.goodsCover.split(",").forEach(item => {
            fileList.push({
              url: item
            });
          });

          this.form = {
            ...response.data,
            goodsStandard: JSON.parse(response.data.goodsStandard),
            fileList
          };
          this.$nextTick(() => {
            document.body.scrollIntoView();
          });
        });
        this.title = "修改产品";
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          const goodsCover = this.form.fileList.map(item => item.url);
          if (goodsCover.length === 0) {
            this.msgError("请至少上传一张商品详情封面图");
            return;
          }
          const postData = {
            ...this.form,
            goodsStandard: JSON.stringify(this.form.goodsStandard),
            goodsAgreement: this.filterContent(this.form.goodsAgreement),
            goodsContent: this.filterContent(this.form.goodsContent),
            goodsCover: goodsCover.join(),
            routineStatus:this.form.routineStatus
          };

          if (this.form.id != null) {
            updateGoods(postData).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
                this.$router.go(-1);
              }
            });
          } else {
            addGoods(postData).then(response => {
              if (response.code === 200) {
                this.msgSuccess("发布成功");
                this.$router.go(-1);
              }
            });
          }
        }
      });
    },
    // 重置按钮
    cancel() {
      this.getEditInfo();
      this.resetForm("form");
    }
  }
};
</script>
<style lang="scss" scoped>
.upload-list {
  display: flex;
  /deep/.avatar-uploader {
    margin-right: 8px;
  }
}
</style>
